<template>
  <view v-if="popReord" class="pop-up flex flex_center">
    <view class="con">
      <p class="myrecord">我的记录</p>
      <scroll-view
        scroll-y="true"
        @scrolltolower="scrolltolower"
        class="content"
        scroll-left="0"
        style="width: 93%"
      >
        <view
          v-for="(item, index) in record"
          class="list"
          :key="`${item}_${index}`"
        >
          {{ item.title }}{{ item.date }}{{ item.num }}
        </view>
        <view v-if="record && record.length < 10" class="tips"
          >暂无更多数据....</view
        >
      </scroll-view>
    </view>
    <view class="btn_close" @click="btnClose">关闭</view>
  </view>
</template>

<script>
import { data } from "./mockData";
import api from "@/api/api";
export default {
  data() {
    return {
      popReord: false,
      record: data,
      params: {
        page: 1,
        size: 10,
      },
    };
  },
  created() {
    this.getRecord();
  },
  methods: {
    // 关闭
    btnClose() {
      this.popReord = false;
    },
    // 滚动到底部的时候会触发
    scrolltolower() {
      this.params.page++;
      this.getRecord();
    },
    // 获取我的记录的数据
    getRecord() {
      this.$post(api.GetProgramToken, this.params)
        .then((res) => {
          if (!res.Success) {
            this.record = this.record.concat({
              title: "1111",
              date: "2020/9/13",
              num: 444,
            });
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/global.css";
.pop-up {
  flex-direction: column;
}
.con {
  width: 80%;
  background: #ffffff;
  height: 50vh;
  border-radius: 10rpx;
  .myrecord {
    text-align: center;
    font-size: 40rpx;
    margin: 20rpx auto;
  }
  .content {
    padding: 0 20rpx 40rpx 20rpx;
    font-size: 30rpx;
    // border: 1px solid red;
    height: 40vh;
    overflow: auto;
    // position: relative;
    .list {
      margin: 10rpx auto;
    }
    .tips {
      // position: absolute;
      color: #3c3c3c;
      text-align: center;
    }
  }
}
.btn_close {
  background: rgba(255, 255, 255, 1);
  width: 80%;
  margin-top: 30rpx;
  border-radius: 20rpx;
  padding: 30rpx 0;
  text-align: center;
  font-size: 30rpx;
}
</style>
